<template>
	<view class="ayi-page">
		<navigation :isBack="true" title="银行卡列表" titleTintColor="#fff">
			<text slot="back" class="iconfont">&#xe63d;</text>
			<text slot="string" @click="goBankaddPage()" class="nav-right-radius">添加</text>
		</navigation>
		<view v-if="!empty(listData)">    
			<view class="bank-card" :class="[`${bankname(item.bankcode)}`]" v-for="(item, index) in listData" :key="index" @click.stop="onSelect(item)">
				<view class="b-card-head">
					<image class="img-img" mode="aspectFit" :src="item.bankcode | bankcodeup('/static/icon/bankicon/','.png')"></image>
					<text>{{ item.bankcode | bankname }}</text>
					<text class="iconfont close-icon" @click.stop="onDeleteCard(item.bank_id)">&#xe62f;</text>
				</view>
				<view class="b-card-content">  
					<view class="b-c-bg"><image class="img-img" mode="aspectFit" :src="item.bankcode | bankcodeup('/static/icon/bankicon/','_d.png')"></image></view>
					<view class="b-c-c-no">{{ item.card }}</view>
					<view class="b-c-c-name">持卡人:{{ item.username | hideName }}</view>
				</view>
			</view>
		</view>
		<view v-if="empty(listData)" class="no-bank-card"><text></text></view>
		<Tabbar :indexpage="-1"></Tabbar>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';
export default {
	components: { Tabbar, navigation },
	data() {
		return {
			listData: [],
			isSelect: false
		};
	},
	onLoad(option) {
		this.showBankList();
		this.initEvent(); //初始化uni.$on的事件
		if (!Tools.isEmpty(option.p)) {
			let tempP = Tools.paramAESDecrypt(decodeURIComponent(option.p));
			if (Tools.isEmpty(tempP)) {
				this.isSelect = false;
				VueTools.toastNo('非法操作');
			} else {
				let paramsObj = JSON.parse(tempP);
				if (parseInt(paramsObj.s)) {
					this.isSelect = true;
				} else {
					this.isSelect = false;
				}
			}
		}
	},
	methods: {
		/**
		 * 跳转到银行卡添加
		 */
		goBankaddPage() {
			this.navigateToSigleUrl('/pages/my/bankadd/bankadd');
		},
		/**
		 * 删除银行卡
		 */
		onDeleteCard(bankId) {
			let that = this;
			Net.ayiHttp(
				URL.USER_DELUSERBANK,
				'{"bankid":"' + bankId + '"}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						that.showBankList();
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		/**
		 * 显示银行卡列表
		 */
		showBankList(isPullDownRefresh = false) {
			let that = this;
			Net.ayiHttp(
				URL.USER_SHOWUSERBANK,
				'{}',
				function(res) {
					if (isPullDownRefresh) {
						uni.stopPullDownRefresh();
					}
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						that.listData = data.bankinfo;
						console.log('银行卡数据列表', data);
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
					if (isPullDownRefresh) {
						uni.stopPullDownRefresh();
					}
				}
			);
		},
		/**
		 * 选中银行卡的
		 * @param {Object} item 一列的银行卡数据
		 */
		onSelect(item) {
			if (this.isSelect) {
				uni.$emit('getCardData', item);
				this.goBackPage();
			}
		},
		initEvent() {
			let that = this;
			uni.$on('showBankList', function() {
				that.showBankList();
			});
		},
		bankname(bankCode){
			return Tools.getBankNameByCode(bankCode);
		}
	},
	onPullDownRefresh() {
		this.showBankList(true);
	},
	onUnload() {}
};
</script>

<style lang="scss">
.bank-card {
	margin: 20rpx;
	height: 320rpx;
	border-radius: 16rpx;
	position: relative;
	.b-card-head {
		height: 120rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 34rpx;
		color: #fff;
		.img-img {
			height: 120rpx;
			width: 120rpx;
			opacity: 0.7;
		}
		.close-icon {
			position: absolute;
			font-size: 36rpx;
			right: 20rpx;
			top: 20rpx;
			z-index: 10;
		}
	}
	.b-card-content {
		padding: 60rpx 20rpx 0rpx 20rpx;
		position: relative;
		color: #fff;
		.b-c-bg {
			position: absolute;
			width: 200rpx;
			height: 180rpx;
			bottom: -20rpx;
			right: 0rpx;
			opacity: 0.3;
			.img-img {
				width: 100%;
				height: 100%;
			}
		}
		.b-c-c-no {
			margin-bottom: 2px;
			font-size: 14px;
			text-align: left;
		}
		.b-c-c-name {
			margin-bottom: 2px;
			font-size: 14px;
			text-align: right;
		}
	}
}
.no-bank-card {
	margin: 0px 20rpx;
	color: #666;
	font-size: 34rpx;
}

.ICBC {
	background: linear-gradient(to right, #fd6e68, #fe5365);
}
.ABC {
	background: linear-gradient(to right, #33b8ab, #009183);
}
.BCM {
	background: linear-gradient(to right, #3c83ca, #3762be);
}
.CCB {
	background: linear-gradient(to right, #3c83ca, #3762be);
}
.CEB {
	background: linear-gradient(to right, #994abd, #641e7c);
}
.CMB {
	background: linear-gradient(to right, #fd6e68, #fe5365);
}
.BOC {
	background: linear-gradient(to right, #fd6e68, #fe5365);
}
.CIB {
	background: linear-gradient(to right, #3c83ca, #3762be);
}
.GDB {
	background: linear-gradient(to right, #fd6e68, #fe5365);
}
.PSBC {
	background: linear-gradient(to right, #33b8ab, #009183);
}
.CNCB {
	background: linear-gradient(to right, #fd6e68, #fe5365);
}
.SPDB {
	background: linear-gradient(to right, #3c83ca, #3762be);
}
.PAB {
	background: linear-gradient(to right, #eabd73, #eea800);
}
.HXB {
	background: linear-gradient(to right, #fd6e68, #fe5365);
}
.ADBC {
	background: linear-gradient(to right, #33b8ab, #009183);
}
.RCC {
	background: linear-gradient(to right, #33b8ab, #009183);
}
.CB {
	background: linear-gradient(to right, #3c83ca, #3762be);
}
</style>
